/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 联系客服二维码组件
 *  */
import React, { useCallback } from "react";
import { Row, Col, Button, message } from "antd";
import { copy } from "@/utils/utils";

const font = {
  fontSize: 20,
  fontWeight: "bold",
};

const InfoContent = (
  <div style={{ textAlign: "center" }}>
    开启后可联系我方客服，每月根据用户点击量*每次点击收益进行结算
  </div>
);

const ServiceQrcode = ({ info = InfoContent }) => {
  const onCopyClick = useCallback(text => {
    copy(text, copied => {
      if (copied) {
        message.success("复制成功！");
      } else {
        message.warning("复制失败，请手动复制！");
      }
    });
  }, []);

  return (
    <Row type="flex" justify="center" style={{ margin: 30 }} gutter={[0, 20]}>
      <Col span={24} style={{ textAlign: "center" }}>
        <Row gutter={[0, 20]}>
          <Col>
            <div style={{ maxWidth: 221, width: "100%", margin: "0 auto" }}>
              <img
                style={{ width: "100%" }}
                src="https://cdn-img.kuaidihelp.com/kb_city_web/wxSetting/concatService.png"
                alt=""
              />
            </div>
          </Col>
          <Col style={font}>扫码添加客服</Col>
          <Col>
            <Row type="flex" justify="center" gutter={[30, 0]}>
              <Col style={font}>微信号：kuaibaowl</Col>
              <Col>
                <Button type="primary" onClick={() => onCopyClick("kuaibaowl")}>
                  复制
                </Button>
              </Col>
            </Row>
          </Col>
        </Row>
      </Col>
      <Col span={24} style={{ ...font, color: "grey" }}>
        <Row>{info}</Row>
      </Col>
    </Row>
  );
};

export default ServiceQrcode;
